<html><head><meta charset="utf-8"><title>01 导读：Hello~TypeScript-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 1-1 01 导读：Hello~TypeScript
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                01 导读：Hello~TypeScript
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-12 16:35:46
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img2.mukewang.com/5cf3c44a0001094f06400360.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。<p class="author">——康德</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">同学你好，我是Lison。很高兴你对TypeScript感兴趣，或许你对TypeScript了解还不多，或许还有很多疑问，比如：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">学 TypeScript 是不是就不需要学 JavaScript 了？</li>
<li style="font-size: 20px; line-height: 38px;">Vue 用 TypeScript 改写发布 3.0 后是不是不用 TypeScript 不行？</li>
<li style="font-size: 20px; line-height: 38px;">TypeScript 靠谱吗？</li>
<li style="font-size: 20px; line-height: 38px;">…</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">诸如此类疑惑，导致你一直对它犹豫不决，那么本节我将代替 TypeScript 向你做一个自我介绍。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">同学你好，我是 TypeScript，如果你觉得我是 JavaScript 的孪生兄弟，或者觉得我是前端圈新扶持起来的太子，那你可能对我是有点误解了。其实我并不是一个新的语言，用大家公认的说法，我是JavaScript的超集，你可以理解为，我是加了一身装备铭文的进化版 JavaScript。JavaScript 有的，我都有，而且做得更好。JavaScript 没有的，我也有，而且我是在很长一段时间内不会被 JavaScript 赶上的。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">虽然我作为超集，但是我始终紧跟 ECMAScript 标准，所以 ES6/7/8/9 等新语法标准我都是支持的，而且我还在语言层面上，对一些语法进行拓展。比如新增了枚举(Enum)这种在一些语言中常见的数据类型，对类(Class)实现了一些ES6标准中没有确定的语法标准等等。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果你是一个追赶技术潮流的开发者，那你应该已经将 ES6/7/8/9 语法用于开发中了。但是要想让具有新特性的代码顺利运行在非现代浏览器，需要借助Babel这种编译工具，将代码转为ES3/5版本。而我，可以完全不用 Babel，就能将你的代码编译为指定版本标准的代码。这一点，我可以说和  JavaScript 打了个平手。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">另外我的优势，想必你也略有耳闻了那就是我强大的类型系统。这也是为什么造世主给我起名TypeScript。如果你是一名前端开发者，或者使用过 JavaScript 进行开发，那么你应该知道，JavaScript 是在运行的时候，才能发现一些错误的，比如：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">访问了一个对象没有的属性；</li>
<li style="font-size: 20px; line-height: 38px;">调用一个函数却少传了参数；</li>
<li style="font-size: 20px; line-height: 38px;">函数的返回值是个字符串你却把它当数值用了；</li>
<li style="font-size: 20px; line-height: 38px;">…</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这些问题在我这里都不算事。我强大的类型系统可以在你编写代码的时候，就检测出你的这些小粗心。先来简单看下我工作的样子：<br>
<img src="http://img.mukewang.com/5cef8f79000160a404020314.png" alt="图片描述" data-original="http://img.mukewang.com/5cef8f79000160a404020314.png" class="" style="cursor: pointer;"><br>
interface 定义的叫接口，它定义的是对结构的描述。下面的 info 使用 ES6 的新关键字 const 定义，通过 info: Info 指定 info 要实现 Info 这个结构，那 info 必须要包含 name 和 age 这两个字段。实际代码中却只有 name 字段，所以你可以看到 info 下面被红色波浪线标记了，说明它有问题。当你把鼠标放在 info 上时，VSCode 编辑器会做出如下提示：<br>
<img src="http://img.mukewang.com/5cef8f9400017a5a17480454.png" alt="图片描述" data-original="http://img.mukewang.com/5cef8f9400017a5a17480454.png" class="" style="cursor: pointer;">如果上面这个小例子中你有很多概念都不了解，没关系，Lison 在后面的章节都会讲到。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">配合<a href="https://github.com/Microsoft/vscode">VSCode</a>这类编辑器，你可以借助编辑器的提示愉快地使用 TypeScript。另外值得一提的是，深受前端开发者喜爱的 VSCode 也是使用 TypeScript 开发的哦。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">很多后端开发者，在做了很久的后端开发，习惯了 C++、Java 这些语言后，可能对我会有很多误解。就拿一个函数重载来说吧，在别的这些语言里，你可以定义多个同名函数，然后不同点在于参数个数、参数类型和函数体等，你可以给同一个函数传入不同参数，编译器就会知道你要调用的是哪个函数体；而我，也是有函数重载的概念的，只不过，我的重载是为了帮助编译器知道，你给同一个函数传入不同参数，返回值是什么情况；在 JavaScript 中，我们如果有一个函数，要根据传入参数不同，执行不同的逻辑，是需要自己在函数体内自行判断的。比如下面这个JavaScript 书写的例子：</p>
</div><div class="cl-preview-section"><pre class="  language-javascript"><code class="prism  language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">getResult</span> <span class="token operator">=</span> input <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> input <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> input<span class="token punctuation">.</span>length
    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> input <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> input<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">else</span> <span class="token keyword">return</span> input
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这个例子很简单。如果输入的值是字符串类型，返回这个字符串的长度；如果是数值类型，返回这个数值变成字符串的结果；如果都不是，原样返回。可以看到，输入不同类型的值，返回的结果类型是不一样的。所以如果你要使用这个函数的返回值，就可能一不小心用错，比如输入<code>123</code>，应该返回字符串 <code>‘123’</code>。如果你在结果上调用 toFixed 方法，如 <code>getResult(123).toFixed()</code>，运行后就会报错，因为字符串是没有这个方法的。如果你使用我来书写，结果就不同了，我会在你写代码的时候就告诉你。来看怎么使用我来书写上面的例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">getResult</span> <span class="token punctuation">(</span>input<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">number</span>
<span class="token keyword">function</span> <span class="token function">getResult</span> <span class="token punctuation">(</span>input<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">string</span>
<span class="token keyword">function</span> getResult <span class="token operator">&lt;</span>T<span class="token operator">&gt;</span><span class="token punctuation">(</span>input<span class="token punctuation">:</span> T<span class="token punctuation">)</span><span class="token punctuation">:</span> T
<span class="token keyword">function</span> <span class="token function">getResult</span> <span class="token punctuation">(</span>input<span class="token punctuation">:</span> <span class="token keyword">any</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">any</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> input <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> input<span class="token punctuation">.</span>length
  <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> input <span class="token operator">===</span> <span class="token string">'number'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> input<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">else</span> <span class="token keyword">return</span> input
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">前三行组成了函数重载，第四行开始是实际函数体，之后你再调用 <code>getResult</code> 来看下效果：<br>
<img src="http://img.mukewang.com/5cef8fd40001e2dd06840154.png" alt="图片描述" data-original="http://img.mukewang.com/5cef8fd40001e2dd06840154.png" class="" style="cursor: pointer;">这里输入123结果应该是字符串’123’，结果访问 toFixed 方法，字符串是没有这个方法的。<br>
<img src="http://img.mukewang.com/5cef90020001a19a05260127.png" alt="图片描述" data-original="http://img.mukewang.com/5cef90020001a19a05260127.png" class="" style="cursor: pointer;"><br>
这里输入字符串’abc’，返回应该是他的长度数值3，结果访问它的length属性，数值是没有length属性的。<br>
<img src="http://img.mukewang.com/5cef901e0001daee05650106.png" alt="图片描述" data-original="http://img.mukewang.com/5cef901e0001daee05650106.png" class="" style="cursor: pointer;"><br>
这里你传入一个对象，既不是字符串也不是数值，所以原样返回这个对象，编译器就知道你的res是对象 <code>{ a: ‘a’, b: ‘b’ }</code> 啦。所以当你输入res然后输入 <code>.</code> 后，VSCode 就会给你列出有哪些属性可以访问。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">是不是和你理解的函数重载有点不一样？所以一定要注意哦，不要用学习其他语言的思维来认识我哦，否则你会钻牛角尖的。上面例子的语法你可以不用在意，因为 Lison 都会详详细细地给你讲哒。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">对了，另外还有一个我的好搭档，TSLint，也是追求极致的你不可或缺的。它和 ESLint 相似，都是能够对你的代码起到约束和提示作用，特别是团队协作的项目中，使用它可以让你们多个开发者都能够遵循相同的代码规范——大到各种语法，小到标点空格。搭配使用 VSCode 和 TSLint，再加上我强大的类型系统，写代码简直不要太嗨~</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">好了，向你介绍得差不多了，相信你对我已经有了一个大致的了解。下面让 Lison 向你客观地介绍下，我的发展趋势以及你为什么要与我为伴。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">相信你在听完 TypeScript 的自我介绍之后，它的亮点你已经了解一二了。或许你还有些顾虑，毕竟学习 TypeScript 是需要时间的，你可能会担心 TypeScript 像 CoffeeScript 一样，随着 ES标准 的不断更新，渐渐退出大家的视线。下面让我们来看下 TypeScript 的发展趋势，来打消你的顾虑，同时让你对它有进一步的了解。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们都知道 TypeScript 最主要的亮点是它的类型系统，这使得在编写代码的时候就能够检测到一些错误。而 JavaScript 是一门动态脚本语言，它不需要编译成二进制代码运行。Node 服务端代码也不需编译即可在服务器起一个服务，你甚至可以直接在服务器修改你的服务代码然后重启就可以，不需要编译等操作。这一切特点使得 JavaScript 的所有调试都需要在运行时才能进行，在编写代码的时候很多问题是无法提前知晓的，而且就JavaScript目前的使用场景来看，它在至少很长一段时间内会保持这样的特点。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">而 TypeScript 和 JavaScript 不同的就是，它可以在你编写代码的时候，就对一些错误进行提示，还能在你使用某个数据的时候，为你列出这个数据可以访问的属性和方法。在 TypeScript 的自我介绍中我们已经看过几个简单的例子，想必你也知道它实现这些的效果了。当我们的项目较为庞大，需要由多人合作开发时，多人协作是需要沟通成本和 review 成本的。一些接口的定义，一些方法的使用，都可能因为个人习惯或沟通不畅导致逻辑实现的差异。而如果引入TypeScript，则会对一些实现进行强校验。如果不按接口实现，编译就没法通过，如果对代码质量要求较高，可以将严格检查全部打开，效果更好。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">那么哪些项目适合用 TypeScript 开发呢，我总结了几类：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">需要多人合作开发的项目</li>
<li style="font-size: 20px; line-height: 38px;">开源项目，尤其是工具函数或组件库</li>
<li style="font-size: 20px; line-height: 38px;">对代码质量有很高要求的项目</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">来看几个广为人知的使用 TypeScript 开发的经典项目：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">VSCode：开源的高质量代码编辑器VSCode使用TypeScript开发，所以它天生就支持 TypeScript；</li>
<li style="font-size: 20px; line-height: 38px;">Angular &amp; React &amp; Vue3.0：现在三足鼎立的三个前端框架，Angular 和 React 已经使用 TypeScript编写，而在我编写专栏的同时，Vue3.0 将使用 TypeScript 进行重构，届时三个前端框架都使用TypeScript编写，如果使用TypeScript开发将会得到很好的类型支持。也可以看出，TypeScript 已经被广为接受。当然了，你依然可以使用JavaScript来开发前端项目，但是相信随着 Vue3.0 发布，TypeScript将会被越来越多的开发者所接受；</li>
<li style="font-size: 20px; line-height: 38px;">Ant Design：使用 React 开发项目的开发者大多应该都知道蚂蚁金服开源UI组件库<a href="https://ant.design/index-cn">Ant Design</a>，同样使用TypeScript进行编写。保证了代码质量的同时，也能很好地支持开发者使用TypeScript进行React项目的开发。如果你使用 Vue 进行开发，Ant Design 也提供了Vue 版的组件库，风格和功能和 React 版的保持一致，共享单元测试和设计资源，对TypeScript的支持也一样很好。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">TypeScript 在实现新特性的同时，时刻保持对ES标准的对齐。一些ECMAScript标准没有确定的内容，在 TypeScript 中已经率先支持了。所以在语法标准方面，可以说TypeScript是略微领先的，比如类的私有属性和方法。ES6标准对类的相关概念的定义中，并没有私有属性的概念，如果想实现私有属性，需要使用一些方法hack（可以参考阮一峰的<a href="http://es6.ruanyifeng.com/#docs/class#%E7%A7%81%E6%9C%89%E6%96%B9%E6%B3%95%E5%92%8C%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7">《ECMAScript 6 入门》- 私有方法和私有属性</a>）；但是TypeScript是支持私有属性的，可以直接使用 <code>private</code> 指定一个私有属性。虽然ECMAScript新的提案提供了定义私有属性的方式，就是使用 <code>#</code> 来指定一个属性是私有的，但是到目前为止现在还没有编译器支持这种语法。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">以上便是对 TypeScript 的大致介绍，接下来我们来看下本小册有哪些内容。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小册共7大章节，7个章节的内容主要为：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">入门准备：讲解学习 TypeScript 和使用 TypeScript 进行开发的一些方法和技巧，是授你以鱼之前的授你以渔，虽然后面章节会学习 TypeScript 的所有语法，但是掌握自学TypeScript的方法技巧，可以帮助你更好更快地学习 TypeScript，也方便你遇到问题时能够快速找到解决方案。</li>
<li style="font-size: 20px; line-height: 38px;">基础部分：这一章都是一些较为基础的知识，只要你有JavaScript的基础就能上手，学习起来不会有太大压力；学习完本章后，你就可以自己使用 TypeScript 写一些基本的日常开发中使用的逻辑了。</li>
<li style="font-size: 20px; line-height: 38px;">进阶部分：这一章你要做好心理准备了。作为进阶知识，不仅内容多一些，而且有些知识较为抽象，不好理解，需要你紧跟着 Lison 多练习多思考。这一章的知识有一些在平常的业务开发中很少用到，但是你也不可以掉以轻心，以免以后需要用到了，都不知道还有这高级内容。</li>
<li style="font-size: 20px; line-height: 38px;">知识整合：这一章是对前面学习的基础和进阶部分的知识的整合。学习这一章，需要前面章节的知识作为铺点，所以一定要把前面章节的知识掌握好哦。</li>
<li style="font-size: 20px; line-height: 38px;">项目配置及书写声明文件：这一章会详细讲解项目的配置项，也就是对 tsconfig.json 里的配置逐条讲解它的作用。之所以放到后面讲，是因为我们前面学习不需要用到这么多配置，但是学习所有配置，可以帮助你在开发自己项目时满足自己的开发需求。书写声明文件需要用到前面的语法知识，学会书写声明文件，我们就可以在使用了一些冷门的没有声明文件的JS库时，自行为它们书写声明文件，以便我们开发使用。</li>
<li style="font-size: 20px; line-height: 38px;">项目实战：这一章是实战部分，通过使用 TypeScript+Vue 开发一个简单后台。我会带着你从零创建一个项目，并实现目录中列出的功能，帮助你将学到的知识在实际开发中进行运用。即是对前面知识的复习，也是对理论知识到实践的转化，做完这个项目，相信你会对TypeScript项目开发有一个新的认识，再去独立开发项目，会轻松很多。</li>
<li style="font-size: 20px; line-height: 38px;">写在最后：这一章是一个总结。相信学到这一章的时候，你已经对 TypeScript 有了整体认知了。我将会在本章分享一些我的开发经验，帮助你在项目开发中少走弯路。</li>
</ol>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">好了，在听完 TypeScript 的自我介绍和发展趋势的了解之后，让我们一起愉快地进入TypeScript 的学习中去吧。</p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/339">
                                                    <div class="next r clearfix">
                                <p>
                                    02 TypeScript应该怎么学
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>